<template>
  <div>
    <nav-bar title="出勤查询">
    </nav-bar>
    <div class="maxinBox backgroundfff">
      <van-dropdown-menu>
        <van-dropdown-item v-model="classGroup" :options="teamList" @change="getAttendanceList" />
        <van-dropdown-item v-model="workType" :options="workTypeList" @change="getAttendanceList" />
      </van-dropdown-menu>
      <van-cell title="统计时间" class="marginTop5" @click="onStatisticalTime" is-link :value="statisticalTime" />
      <van-popup v-model="showStatisticalTime" position="bottom" style="height: 40%">
        <van-datetime-picker
          v-model="currentDate"
          @confirm="statisticalConfirm"
          @cancel="showStatisticalTime = false"
          type="date"
          :title="$t('dashbord.workTypeInformation.chooseDate')"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <div class="center">
        <div class="tableTitle fontSize14">
          <div style="width: 3.125rem;">姓名</div>
          <div style="width: 3.75rem;">工种</div>
          <div class="width">出工时间</div>
          <div class="width">收工时间</div>
          <div>工时</div>
          <div class="clear"></div>
        </div>
        <div class="tableContent fontSize14" v-for="(item, index) in dataList" :key="index">
          <div style="width: 3.125rem;">{{item.builderName}}
            <!-- <van-button class="fontSize12" plain hairline size="mini" type="warning" round>班组长</van-button> -->
          </div>
          <div style="width: 3.75rem;">{{item.workTypeName}}</div>
          <div class="width" v-if="item.clockInTime">{{item.clockInTime | formatDate('YYYY/MM/DD')}}</div>
          <div class="width" v-else>--</div>
          <div class="width" v-if="item.clockOutTime">{{item.clockOutTime | formatDate('YYYY/MM/DD')}}</div>
          <div class="width" v-else>--</div>
          <div>{{item.workHours || '--'}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import attendanceAPI from '../../../../api/workAPI/attendanceAPI.js'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  import moment from 'moment'
  export default {
    data() {
      return {
        classGroup: '',
        workType: '',
        workTypeList: [],
        teamList: [],
        showStatisticalTime: false,
        statisticalTime: '',
        minDate: new Date(2015, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        dataList: []
      }
    },
    methods:{
      // 查询班组列表
      getClassGroup() {
        dashbordAPI.getClassGroup().then(res => {
          this.teamList = res.data.map(item => {
            return {
              text: item.dictLabel,
              value: item.dictCode
            }
          })
          this.teamList.unshift({
            text: '全部班组',
            value: ''
          })
        })
      },
      // 查询工种列表
      getWorkType() {
        this.workTypeList.unshift({
          text: '全部工种',
          value: ''
        })
        dashbordAPI.getWorkType().then(res => {
          this.workTypeList = res.data.map(item => {
            return {
              text: item.dictLabel,
              value: item.dictCode
            }
          })
          this.workTypeList.unshift({
            text: '全部工种',
            value: ''
          })
        })
      },
      // 查询考勤列表
      getAttendanceList() {
        let projectId = localStorage.getItem('projectId')
        attendanceAPI.getAttendanceListByClass(projectId, this.statisticalTime, this.classGroup, this.workType).then(res => {
          this.dataList = res
        })
      },
      onStatisticalTime() {
        this.showStatisticalTime = true
      },
      // 进场日期选择确定按钮
      statisticalConfirm(val) {
       this.statisticalTime = moment(val).format('YYYY-MM-DD')
       this.showStatisticalTime = false
       this.getAttendanceList()
      },
    },
    mounted() {
      this.getAttendanceList()
      this.getWorkType()
      this.getClassGroup()
    }
  }
</script>

<style scoped lang="scss">
  .tableContent:nth-child(2n){
    padding: 0.625rem 0.9375rem;
    color: #666;
  }
  .tableContent:nth-child(2n + 1){
    padding: 0.625rem 0.9375rem;
    color: #666;
    background-color: #F6FAFF;
  }
  .tableTitle{
    padding: 0.625rem 0.9375rem;
    background-color: #F6F6F6;
    height: 1.25rem;
    color: #999;
    .width{
      width: 28%;
    }
    div{
      width: 10%;
      float: left;
    }
  }
  .tableContent{
    padding: 0.3125rem 0.9375rem;
    color: #666;
    height: 1.25rem;
    .width{
      width: 28%;
    }
    div{
      width: 10%;
      float: left;
    }
  }
</style>
